import React, { useState, useEffect } from 'react'
import FileViewer from 'react-file-viewer'
import { connect } from 'dva';
import { Tree, Icon, Tooltip } from 'antd'
import tools from 'columns/tools'

import './index.styl'

const { TreeNode } = Tree;

function OnlineView({ dispatch,
  commonAction: { uploadInfo },
  detail: { deviceFileListWord, deviceFileListPdf, deviceFileListImage } }) {
  const [fileType, setFileType] = useState('')
  const [filePath, setFilePath] = useState('')
  const treeData = [
    {
      title: '文档资料（word）',
      key: '0',
      children: deviceFileListWord
    },
    {
      title: '文档资料（PDF）',
      key: '1',
      children: deviceFileListPdf
    },
    {
      title: '图像资料',
      key: '2',
      children: deviceFileListImage
    },
  ]
  function selectFn(selectedKeys) {
    setFilePath(selectedKeys + '')
    setFileType((selectedKeys + '').split('.')[(selectedKeys + '').split('.').length - 1])
  }
  function handleDownFile(v) {
    window.open(v.fileUrl)
  }
  useEffect(() => {
    dispatch({
      type: 'commonAction/getToken',
    });
  }, [dispatch]);
  return (
    <div className='OnlineView'>
      <Tree showIcon onSelect={selectFn}>
        {
          treeData.map((i) => {
            return (
              <TreeNode title={i.title} key={i.key}>
                {
                  i.children.length > 0 ? (
                    i.children.map((v) => {
                      return (
                        <TreeNode
                          icon={<Icon type="download"
                            onClick={() => handleDownFile(v)} />}
                          title={v.fileName.length > 10 ? <Tooltip placement="right" title={v.fileName}>{v.fileName.slice(0, 10) + '...'}</Tooltip> : <span>{v.fileName}</span>}
                          key={v.fileUrl}
                        />)
                    })
                  ) : null
                }
              </TreeNode>
            )
          })
        }
      </Tree>
      <div className='fileView'>
        {/* {
          hasFileType(fileType)?
          // <iframe width="100%" height="100%" style={{ border: 0 }} src={`http://view.xdocin.com/xdoc?_xdoc=${filePath}&_toolbar=false`}></iframe>
          <iframe width="100%" height="100%" style={{ border: 0 }} src={`http://view.officeapps.live.com/op/view.aspx?src=${filePath}`}></iframe>
          :
          null
        } */}
        {/* {
           ((fileType === 'jpeg') || (fileType === 'jpg') || (fileType === 'png')) ?
           <img src={filePath} style={{ maxHeight: '100%', maxWidth: '100%' }} />
           :
           null
        } */}
        {/* <iframe width="100%" height="100%" style={{ border: 0 }} src={`http://view.xdocin.com/xdoc?_xdoc=http://103.131.171.121:9000/wolaiye/202005/31ae7ee4-bf21-433a-a3d4-bc59c2332206.docx`}></iframe> */}
        {
          ((fileType === 'jpeg') || (fileType === 'jpg') || (fileType === 'png')) ?
            <img src={filePath} style={{ maxHeight: '100%', maxWidth: '100%' }} />
            :
            null
        }
        {
          (fileType === 'doc' || fileType === 'docx') ? (uploadInfo.fileService === "Local" ? <iframe width="100%" height="100%" style={{ border: 0 }} src={`http://view.xdocin.com/xdoc?_xdoc=${filePath}&_toolbar=false`}></iframe> : 
          <iframe width="100%" height="100%" src={`https://view.officeapps.live.com/op/view.aspx?src=${filePath}`}></iframe>
          )
            : null
        }
        {
          fileType === 'pdf' ?
            <iframe width="100%" height="100%" style={{ border: 0 }} src={`${filePath}`}></iframe>
            : null
        }

        {/* <iframe width="100%" height="100%" src={`https://view.officeapps.live.com/op/view.aspx?src=${filePath}`}></iframe> */}
        {/* {
          fileType === ''?
          null
          :
          (
            fileType === 'doc' || fileType === 'docx' ?
            <iframe width="100%" height="100%" src={`https://view.officeapps.live.com/op/view.aspx?src=${filePath}`}></iframe>
            :
            <FileViewer
              key={filePath}
              fileType={fileType}
              filePath={filePath}
              // onError={onError}
              errorComponent={'文件错误'}
              unsupportedComponent={'文件格式不正确'}
            />
          )
        } */}
      </div>
    </div>
  )
}


export default connect(({ commonAction }) => ({
  commonAction,
}))(OnlineView);
